<template>
  <div>
    <el-card>
      <el-table border :data="skuList">
        <el-table-column
          label="序号"
          width="80"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="名称"
          width="300"
          prop="skuName"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="描述"
          width="300"
          prop="skuDesc"
        ></el-table-column>
        <el-table-column label="图片" width="200">
          <template #="{ row }">
            <img height="150" :src="row.skuDefaultImg" />
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          width="150"
          prop="weight"
        ></el-table-column>
        <el-table-column
          label="价格"
          width="150"
          prop="price"
        ></el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #="{ row }">
            <el-button
              :type="row.isSale == 0 ? 'success' : 'warning'"
              size="small"
              :icon="row.isSale == 0 ? 'Top' : 'Bottom'"
              @click="changeSaleStatus(row)"
            ></el-button>
            <el-button type="primary" size="small" icon="Edit"></el-button>
            <el-button
              type="info"
              size="small"
              icon="InfoFilled"
              @click="lookSkuDetail(row)"
            ></el-button>
            <el-popconfirm
              :title="`你确定要删除${row.skuName}吗?`"
              @confirm="onDeleteSku(row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 10px"
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="pageSize"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @size-change="getSkuList"
        @current-change="getSkuList"
      />

      <el-drawer v-model="drawer" title="查看商品详情" direction="rtl">
        <el-form label-width="80">
          <el-form-item label="名称">{{ lookSkuObj?.skuName }}</el-form-item>
          <el-form-item label="描述">{{ lookSkuObj?.skuDesc }}</el-form-item>
          <el-form-item label="价格">{{ lookSkuObj?.price }}</el-form-item>
          <el-form-item label="平台属性">
            <el-tag
              style="margin-right: 5px"
              v-for="i in lookSkuObj?.skuAttrValueList"
              :key="i.id"
              type="danger"
              >{{ i.valueName }}</el-tag
            >
          </el-form-item>
          <el-form-item label="销售属性">
            <el-tag
              style="margin-right: 5px"
              v-for="i in lookSkuObj?.skuSaleAttrValueList"
              :key="i.id"
              type="success"
              >{{ i.saleAttrValueName }}</el-tag
            >
          </el-form-item>
          <el-form-item label="商品图片">
            <div
              style="width: 100%"
              v-if="
                lookSkuObj &&
                lookSkuObj.skuImageList &&
                lookSkuObj.skuImageList.length > 0
              "
            >
              <el-carousel
                type="card"
                height="150px"
                indicator-position="outside"
              >
                <el-carousel-item
                  v-for="i in lookSkuObj?.skuImageList"
                  :key="i.id"
                >
                  <img
                    style="width: 150px; box-shadow: 5px 5px 5px #888888"
                    :src="i.imgUrl"
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div v-else>
              <span>此商品暂无图片</span>
            </div>
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as skuRequest from "@/api/product/sku";
import { skuListResponseData, skuObj } from "@/api/product/sku/type";
import resultCheck from "@/utils/notice";

let pageNo = ref<number>(1);
let limit = ref<number>(3);
let total = ref<number>(0);
let pageSize = ref<number[]>([3, 5, 10, 20]);
let skuList = ref<any[]>([]);

//抽屉相关
let drawer = ref<boolean>(false);
let lookSkuObj = ref<skuObj | null>(null);
const lookSkuDetail = async (sku: skuObj) => {
  //根据skuId获取其平台属性和销售属性的值
  let result = await skuRequest.reqgetSkuInfo(sku.id);
  if (result.code == 200) {
    drawer.value = true;
    lookSkuObj.value = result.data;
  }
};

const getSkuList = async () => {
  let result: skuListResponseData = await skuRequest.reqgetskulist(
    pageNo.value,
    limit.value,
  );
  if (result.code == 200) {
    total.value = result.data.total;
    skuList.value = result.data.records;
  }
};

onMounted(() => {
  getSkuList();
});
// 封装分页器（当从接口直接获取到全部数据的情况）
// let Testdata = [
//   {id:1,title:'11111'},
//   {id:2,title:'22222'},
//   {id:3,title:'33333'},
//   {id:4,title:'44444'},
//   {id:5,title:'55555'},
//   {id:6,title:'66666'},
//   {id:7,title:'77777'},
//   {id:8,title:'88888'},
//   {id:9,title:'99999'},
// ]
// const vee_pagination = (dataArr:any[],pageNo:number = 1,limit:number = 3) => {
//   return dataArr.slice((pageNo-1)*limit,(pageNo*limit))
// }
// skuList.value = vee_pagination(Testdata,pageNo.value,limit.value);
// total.value = Testdata.length

//商品上下架
const changeSaleStatus = async (row: skuObj) => {
  if (row.isSale == 0) {
    // 商品开始上架
    let result = await skuRequest.reqonsale(row.id);
    resultCheck(result, "上架", "code", 200, getSkuList);
  } else {
    // 商品开始下架
    let result = await skuRequest.reqcancelsale(row.id);
    resultCheck(result, "下架", "code", 200, getSkuList);
  }
};

const onDeleteSku = async (skuId: number) => {
  let result = await skuRequest.reqdeletesku(skuId);
  resultCheck(result, "删除", "code", 200, getSkuList);
};
</script>

<style scoped></style>
